<template>
    <div>
        <el-drawer
            v-model="isShow"
            size="50%"
            :destroy-on-close="true"
            @close="closeHandle"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            :show-close="false"
        >
            <template #header="{ close, titleId, titleClass }">
                <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
            </template>
            <el-form :model="form" label-width="auto" label-position="right" ref="formRef" :rules="rules">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="部门受案号" required prop="name">
                            <el-input v-model="form.name" placeholder="双击选择案件" @click="MaterialSelectCaseRef.showList()" :readonly="isreadonly"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="律师柜">
                            <el-select
                                v-model="form.gui"
                                >
                                <el-option
                                    v-for="item in guioptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                                </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="存放人员">
                            <el-input v-model="form.casecode" :readonly="isreadonly"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="存放时间">
                            <el-input v-model="form.casecode" :readonly="isreadonly"/>
                        </el-form-item>
                    </el-col>
                    <el-divider class="mt-3 mb-3"/>
                    <el-col :span="24" class="mt-0 mb-3">
                        <h4 class="tittle"><span class="tittle_dian me-2"></span><span>文件列表</span></h4>
                    </el-col>
                    <el-col :span="10" class="mt-0 mb-3">
                        <el-form-item label="文件名称">
                            <el-select
                                v-model="form.gui"
                                :readonly="isreadonly"
                                >
                                <el-option
                                    v-for="item in guioptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                                </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" class="mt-0 mb-3">
                        <el-form-item label="文件数量" style="width:100%">
                            <el-input-number v-model="form.num" style="width:100%;" :controls="false" :readonly="isreadonly" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" class="mt-0 mb-3" v-if="isAdd">
                        <el-button
                        plain
                        type="primary"
                        @click="addnew"
                    >
                        <el-icon class="me-2">
                            <Plus/>
                        </el-icon>
                        新增
                    </el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-table
                            ref="TableDataRef"
                            v-loading="loading"
                            :data="TablesData"
                            show-overflow-tooltip
                            max-height="320"
                        >
                            <el-table-column label="文件名称">
                                <template #default="scope">
                                    <div v-if="!scope.row.isEditing">{{ scope.row.name }}</div>
                                    <el-select
                                    v-else
                                    v-model="scope.row.name"
                                    :readonly="isreadonly"
                                    @blur="saveRow(scope.row)"
                                    >
                                    <el-option
                                        v-for="item in guioptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="文件数量">
                                <template #default="scope">
                                    <div v-if="!scope.row.isEditing">{{ scope.row.num }}</div>
                                    <el-input-number
                                    v-else
                                    v-model="scope.row.num"
                                    style="width:100%;" 
                                    :controls="false"
                                    @blur="saveRow(scope.row)"
                                     />
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="操作" width="220" v-if="isAdd">
                                <template #default="scope">
                                    <el-button
                                        link
                                        type="primary"
                                        @click="editRow(scope.row)"
                                    >
                                        <el-icon class="me-1">
                                            <Edit/>
                                        </el-icon>
                                        编辑
                                    </el-button>
                                    <el-button
                                        link
                                        type="danger"
                                        @click="deleteData(scope.row)"
                                    >
                                        <el-icon class="me-1">
                                            <Delete/>
                                        </el-icon>
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>

            </el-form>
            <template #footer>
                <el-button type="primary" @click="submitHandle" v-if="isAdd">提交</el-button>
                <el-button @click="isShow = false">关闭</el-button>
            </template>
        </el-drawer>
        <MaterialSelectCase ref="MaterialSelectCaseRef" @getCaseDatas="getCaseData"></MaterialSelectCase>
    </div>
</template>

<script setup>
const {proxy} = getCurrentInstance()
// import {getCaseInfoList,getCaseInfoInfo} from "@/api/CaseInfo/CaseInfo";
import MaterialSelectCase from "@/components/Case/MaterialSelectCase.vue";
// 是否显示抽屉
const isShow = ref(false)
const isreadonly = ref(true)
const MaterialSelectCaseRef = ref()
const guioptions = ref([{
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  }])
const loading = ref(false)
const TablesData = ref([
            { id: 1, name: '文件A', num: 10, isEditing: false },
            { id: 2, name: '文件B', num: 5, isEditing: false },
        ])

// 抽屉标题
const title = ref('')

const rules = {
    name: [{ required: true, message: "案件名称不能为空", trigger: "change" }],
    unitId: [{ required: true, message: "办案单位不能为空", trigger: "blur" }],
    depid: [{ required: true, message: "办案部门不能为空", trigger: "blur" }],
}

const isAdd = ref(true)

const form = ref({
    num:0
})
// 通知事件
const emit = defineEmits(['getCaseList'])

const changeShowStatus = () => {
    isShow.value = !isShow.value
}

onMounted(() => {
    
})


const addnew = () => {
    const newData = {
        id:TablesData.length + 1,
        name: form.value.gui,
        num: form.value.num,
        isEditing: false
    };
    TablesData.value.push(newData)
    form.value.gui = '';
    form.value.num = '';
}
const editRow = (row) => {
    row.isEditing = true;
}
const saveRow = (row) => {
    row.isEditing = false;
        // 这里可以调用接口来保存修改的数据
        console.log('保存数据:', row);
}
const deleteData = (row) => {
    const index = TablesData.value.findIndex(item => item === row);
    if (index !== -1) {
        // 从 TablesData 数组中删除当前行
        TablesData.value.splice(index, 1);
        proxy.$modal.msgSuccess("删除成功");
    }
    // 删除操作
    console.log('删除数据:', row);
}

const showAddEditCase = () => {
    title.value = '新增管理员存储资料';
    isAdd.value = true
    isreadonly.value = false
    changeShowStatus()
}

const showEditCase = async (data,OperateType) => {
    if(OperateType == "edit"){
        title.value = '修改资料信息'
        isAdd.value = true
        isreadonly.value = false
    }else{
        title.value = '资料详情'
        isAdd.value = false
        isreadonly.value = true
    }
    // 对传过来的案由中文进行查找出其对应的casebriefId值
    // await getCaseInfoInfo(data.caseCaseinfoId).then(res => {
    //         form.value = res.data
    //         getDepartment()
    //     })
    changeShowStatus()
}

defineExpose({showAddEditCase,showEditCase})


const submitHandle = async () => {
    console.log(TablesData.value)
    // proxy.$refs["formRef"].validate(valid => {
    //     if (valid) {
    //         if (form.value['caseCaseinfoId']) {
    //             editCaseInfo(form.value).then(res => {
    //                 changeShowStatus()
    //                 emit('getCaseList', '来了老弟')
    //             })
    //         } else {
    //             createCaseInfo(form.value).then(res => {
    //                 changeShowStatus()
    //                 emit('getCaseList', '来了老弟')
    //             })
    //         }
    //     }
    // });
}
const getCaseData = (data) => {
    console.log("儿子传过来数据了",data)
}

// 关闭后的回调事件
const closeHandle = () => {
}
</script>

<style lang="scss" scoped>
h4{margin:0;}
.tittle{display: flex;align-items: center;color: #0077B9;}
:deep() .el-date-editor {
  width: 100%;
}
:deep() .el-cascader{width: 100%;}
:deep() .el-drawer__body{padding: 10px 20px;}

.tittle_dian{width:7px;height:16px;display: inline-block;background: #0077B9;}

:deep() .el-input-number .el-input__inner{text-align: left;}
</style>